@import '../../app/variablesV2.css';

:root {
  --background-color-tooltip: var(--color-content-light);
  --tooltip-arrow-size: 6px;
  --info-icon-size: 16px;
  --tooltip-spacing-inside: 8px;
}

.tooltipWrapper {
  position: relative;

  &:global(.showOnBottom),
  &:global(.showOnTop) {
    & .tooltip {
      left: 50%;
      right: auto;
      transform: translateY(0) translateX(-50%);

      & .tooltipArrow {
        left: 50%;
      }
    }
  }

  &:global(.showOnBottom) {
    & .tooltip {
      bottom: auto;
      top: calc(100% + 10px);

      & .tooltipArrow {
        bottom: auto;
        top: -16px;
        transform: rotate(90deg);
      }
    }
  }

  &:global(.showOnTop) {
    & .tooltip {
      bottom: calc(100% + 10px);
      top: auto;

      & .tooltipArrow {
        bottom: -16px;
        top: auto;
        transform: rotate(-90deg);
      }
    }
  }
}

.infoIcon {
  align-items: center;
  background: var(--color-dark-gray);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  height: var(--info-icon-size);
  justify-content: center;
  margin-left: calc(var(--info-icon-size) / 2);
  width: var(--info-icon-size);

  &::before {
    content: '?';
    color: var(--color-white);
    font-size: var(--font-size-small);
  }
}

.tooltip {
  background-color: var(--background-color-tooltip);
  border-radius: var(--border-radius-standard);
  box-shadow: var(--box-shadow-standard);
  box-sizing: border-box;
  color: var(--color-white);
  font-family: var(--content-font);
  font-size: var(--paragraph-font-size-l);
  left: calc(var(--info-icon-size) * 2);
  line-height: 1.47;
  max-width: 380px;
  opacity: 0;
  padding: 24px;
  position: absolute;
  text-align: left;
  top: 50%;
  transform: translateY(-50%);
  transition:
    visibility var(--animation-speed-fast) linear,
    opacity var(--animation-speed-fast) linear;
  visibility: hidden;
  width: 45vw; /* stylelint-disable-line */
  z-index: var(--overlay-index);

  & .tooltipArrow {
    color: var(--background-color-tooltip);
    height: 27px;
    left: -var(--tooltip-arrow-size);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--tooltip-arrow-size);
  }

  &:global(.shownTooltip) {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
  }

  & p {
    margin: 0;
  }

  & .title {
    font-family: var(--heading-font);
    font-weight: var(--font-weight-bold);
  }

  & a {
    color: var(--color-primary-light);
  }

  & header {
    margin-bottom: var(--tooltip-spacing-inside);
  }

  & footer {
    margin-top: var(--tooltip-spacing-inside);
    padding: 0;
  }
}
